<div flex layout="row" layout-align="start center">
  <div hide-xs class="mat-subtitle-1 pad-left pad-right push-bottom-none">
    Chart Theme:
  </div>
  <mat-form-field>
    <mat-select
      [(value)]="selectedTheme"
      (valueChange)="selectChartTheme($event)"
    >
      <mat-option *ngFor="let theme of themes" [value]="theme">
        {{ theme }}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <div hide-xs class="mat-subtitle-1 pad-left pad-right push-bottom-none">
    Show centroids:
  </div>
  <mat-slide-toggle [(ngModel)]="showCentroids"></mat-slide-toggle>
</div>
<td-chart [style.height.px]="300" [themeName]="themeSelector.selected$ | async">
  <td-chart-toolbox
    [show]="true"
    [right]="30"
    [top]="10"
    [feature]="{
      dataView: {
        readOnly: true,
        title: 'View Data',
        lang: ['Data View', 'Turn Off', 'Refresh']
      },
      dataZoom: { title: { zoom: 'Zoom', back: 'Back' } },
      restore: { title: 'Restore' }
    }"
  >
  </td-chart-toolbox>
  <td-chart-tooltip [trigger]="'item'">
    <ng-template let-params tdTooltipFormatter>
      <ng-container *ngIf="params">
        <div layout="row" layout-align="start center">
          <mat-icon>
            <span [style.color]="params.color">people</span>
          </mat-icon>
          <span class="mat-caption pad-left-sm">
            {{ params.seriesName ? params.seriesName : params.name }}:
            {{ params.value }}
          </span>
        </div>
      </ng-container>
    </ng-template>
  </td-chart-tooltip>
  <td-chart-x-axis
    [show]="true"
    [position]="'bottom'"
    [type]="'value'"
    [boundaryGap]="true"
  ></td-chart-x-axis>
  <td-chart-y-axis [show]="true" [type]="'value'"></td-chart-y-axis>
  <td-chart-series
    td-clustering
    [clusterCount]="6"
    [showCentroids]="showCentroids"
    [data]="[
      [3.275154, 2.957587],
      [-3.344465, 2.603513],
      [0.355083, -3.376585],
      [1.852435, 3.547351],
      [-2.078973, 2.552013],
      [-0.993756, -0.884433],
      [2.682252, 4.007573],
      [-3.087776, 2.878713],
      [-1.565978, -1.256985],
      [2.441611, 0.444826],
      [-0.659487, 3.111284],
      [-0.459601, -2.618005],
      [2.17768, 2.387793],
      [-2.920969, 2.917485],
      [-0.028814, -4.168078],
      [3.625746, 2.119041],
      [-3.912363, 1.325108],
      [-0.551694, -2.814223],
      [2.855808, 3.483301],
      [-3.594448, 2.856651],
      [0.421993, -2.372646],
      [1.650821, 3.407572],
      [-2.082902, 3.384412],
      [-0.718809, -2.492514],
      [4.513623, 3.841029],
      [-4.822011, 4.607049],
      [-0.656297, -1.449872],
      [1.919901, 4.439368],
      [-3.287749, 3.918836],
      [-1.576936, -2.977622],
      [3.598143, 1.97597],
      [-3.977329, 4.900932],
      [-1.79108, -2.184517],
      [3.914654, 3.559303],
      [-1.910108, 4.166946],
      [-1.226597, -3.317889],
      [1.148946, 3.345138],
      [-2.113864, 3.548172],
      [0.845762, -3.589788],
      [2.629062, 3.535831],
      [-1.640717, 2.990517],
      [-1.881012, -2.485405],
      [4.606999, 3.510312],
      [-4.366462, 4.023316],
      [0.765015, -3.00127],
      [3.121904, 2.173988],
      [-4.025139, 4.65231],
      [-0.559558, -3.840539],
      [4.376754, 4.863579],
      [-1.874308, 4.032237],
      [-0.089337, -3.026809],
      [3.997787, 2.518662],
      [-3.082978, 2.884822],
      [0.845235, -3.454465],
      [1.327224, 3.358778],
      [-2.889949, 3.596178],
      [-0.966018, -2.839827],
      [2.960769, 3.079555],
      [-3.275518, 1.577068],
      [0.639276, -3.41284]
    ]"
  ></td-chart-series>
</td-chart>
